<template>
  <div id="datail">
    <navbar :pro="n1" @tiaozhuan="tiaozhuan"></navbar
    ><!--详情页的导航栏 -->
    <div class="scroll" @scroll="f3" ref="scro">
      <!-- 滚动 -->
      <swiper class="z1"
        ><!-- 轮播图 -->
        <swiperitem v-for="(item, index) in topimages" :key="index">
          <img :src="item" alt="" />
        </swiperitem>
      </swiper>
      <price :goods="goods"></price>
      <shopInfo :shop="shop"></shopInfo>
      <goodsitem :detailInfo="detailInfo"></goodsitem>
      <paramInfo :commentInfo="commentInfo" ref="paramInfo"></paramInfo>
      <comment2 :comment="comment" ref="comment2"></comment2>
      <z1 :goods="list" ref="z1"></z1>
    </div>
    <dibu></dibu>
    <guowuche :Skus="Skus" :chima="chima" :yanse="yanse"></guowuche>
  </div>
</template>

<script>
import { getDatail, getDatailList } from "../../network/home"; //请求数据
import { Goods, Shop, Param } from "./data"; //类过筛选数据
import navbar from "./datailchild/navbar.vue"; //详情页导航栏组件
import shopInfo from "./datailchild/ShopInfo.vue"; //商家LOGO等组件
import { swiper, swiperitem } from "../../components/common/swiper/index"; //轮播图组件
import price from "./datailchild/price.vue"; //价格活动等信息组件
import goodsitem from "./datailchild/goodsitem.vue"; //商品详情图组件
import paramInfo from "./datailchild/paramInfo.vue"; //商品参数组件
import comment2 from "./datailchild/comment.vue"; //商品评论
import z1 from "../../components/content/goods/z1.vue"; //推荐商品
import dibu from "../detail/datailchild/dibu.vue"; //底部模块
import guowuche from "./datailchild/guowuche.vue";//加入购物车后的SKU
//import { filter } from 'vue/types/umd'
export default {
  name: "detail",
  data() {
    return {
      iid: '',
      topimages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      commentInfo: {},
      comment: [],
      srcoll1: null,
      list: [],
      n1: null,
      scrollTJ: null,
      scrollCS: null,
      scrollPL: null,
      Skus: [],
      chima: [],
      yanse: [],
    };
  },
  created() {
		this.iid=this.$route.params.id
    getDatail(this.$route.params.id).then((res) => {
      console.log(res);
      const data = res.data.result;
      //获取顶部轮播图数据
      this.topimages = data.itemInfo.topImages;
      //获取商品的信息,通过Goods类筛选有用的数据
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      //获取商家详情
      this.shop = new Shop(data.shopInfo);
      //获取商品详情图片
      this.detailInfo = data.detailInfo;
      //获取参数信息
      this.commentInfo = new Param(data.itemParams.info, data.itemParams.rule);
      //6.获取评论信息
      if (data.rate.cRate !== 0) {
        //有些商品没有评论信息，需要判断一下
        this.comment = data.rate.list;
      }
      //7.加入购物车产品SKU信息
      this.Skus = data.skuInfo.skus;
      console.log(this.Skus);
      this.chima = this.v1(this.Skus, this.chima, "size");
      console.log(this.Skus);
      this.yanse = this.v1(this.Skus, this.yanse, "style");
    });

    //推荐商品数据
    getDatailList().then((res) => {
      this.list = res.data.data.list;
    });
  },
  mounted() {
    // this.$bus.$on("Skuu", this.Skuu)
	},
  components: {
    navbar,
    swiper,
    swiperitem,
    price,
    shopInfo,
    goodsitem,
    paramInfo,
    comment2,
    z1,
    dibu,
    guowuche,
  },
  methods: {
    v1(arr1, arr2, z) {
      //过滤尺码
      for (let item of arr1) {
        arr2.push(item[z]);
      }
      console.log(arr2);
      arr2 = arr2.filter(function (value, index, arr) {
        return arr.indexOf(value, 0) == index;
      });
      console.log(arr2);
      return arr2;
    },
    f3() {
      // console.log('这是scrollTOP'+this.$refs.scro.scrollTop);
      this.scroll1 = this.$refs.scro.scrollTop;
      this.scrollTJ = this.$refs.z1.$el.offsetTop; //推荐位置
      this.scrollCS = this.$refs.paramInfo.$el.offsetTop; //参数位置
      this.scrollPL = this.$refs.comment2.$el.offsetTop; //评论的位置
      if (this.scroll1 < this.scrollCS) {
        this.n1 = 0;
      } else if (this.scroll1 < this.scrollPL) {
        this.n1 = 1;
      } else if (this.scroll1 < this.scrollTJ) {
        this.n1 = 2;
      } else {
        this.n1 = 3;
      }
    },
    tiaozhuan(a1) {
      if (a1 == 0) {
        this.$refs.scro.scrollTop = 0;
      } else if (a1 == 1) {
        this.$refs.scro.scrollTop = this.scrollCS + 1;
      } else if (a1 == 2) {
        this.$refs.scro.scrollTop = this.scrollPL + 1;
      } else {
        this.$refs.scro.scrollTop = this.scrollTJ + 1;
      }
    },
		Skuu(){
			// let gooodsitem={}
			// gooodsitem.title=this.goods.title
			// gooodsitem.price=this.goods.newPrice
			// gooodsitem.iid=this.iid
			// console.log(gooodsitem);
			// this.$store.commit("addCart",gooodsitem)
		}
  },
};
</script>

<style scoped>
#detail {
  width: 100vw;
}
.z1 {
  height: 300px;
  overflow: hidden;
}
.scroll {
  height: calc(100vh - 44px);
  margin-top: 44px;
  position: relative;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}
</style>